<template>
	<view>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="index-banner">
				<banner :data="bannerList"></banner>
			</view>
			<view class="box-flex-around index-hot">
				<view class="grid-item-box">
					<uni-icons type="vip-filled" :size="40"></uni-icons>
					<text class="text">标题</text>
				</view>
				<view class="grid-item-box">
					<uni-icons type="color-filled" :size="40"></uni-icons>
					<text class="text">标题</text>
				</view>
				<view class="grid-item-box">
					<uni-icons type="calendar-filled" :size="40"></uni-icons>
					<text class="text">标题</text>
				</view>
				<view class="grid-item-box">
					<uni-icons type="videocam-filled" :size="40"></uni-icons>
					<text class="text">标题</text>
				</view>
				<view class="grid-item-box">
					<uni-icons type="images-filled" :size="40"></uni-icons>
					<text class="text">标题</text>
				</view>
			</view>
			<view class="box-flex-around index-list">
				<view class="box-flex-column box-flex-start">
					<view class="box box-card goods-card-left" v-for="(item, index) in leftList" :key="index" @click="toDetail(item)">
						<image :src="$util.showImage(item.thumbImage)"  mode="aspectFill"></image>
						<view class="box goods-title"><text>{{item.name}}</text></view>
						<view class="box">
							<uni-tag :inverted="true" :text="tag" type="warning" v-for="(tag, i) in item.tag.split(',')" :key="i" style="margin-right: 10rpx;"/>
						</view>
						<view class="box goods-price">
							<text class="goods-price-small">￥</text>
							<text>{{item.priceInteger}}</text>
							<text class="goods-price-small" v-if="item.priceDecimal">.{{item.priceDecimal}}</text>
						</view>
					</view>
				</view>
				<view class="box-flex-column box-flex-start">
					<view class="box box-card goods-card-right" v-for="(item, index) in rightList" :key="index" @click="toDetail(item)">
						<image :src="$util.showImage(item.thumbImage)" mode="aspectFill"></image>
						<view class="box goods-title"><text>{{item.name}}</text></view>
						<view class="box">
							<uni-tag :inverted="true" :text="tag" type="warning" v-for="(tag, i) in item.tag.split(',')" :key="i" style="margin-right: 10rpx;"/>
						</view>
						<view class="box goods-price">
							<text class="goods-price-small">￥</text>
							<text>{{item.priceInteger}}</text>
							<text class="goods-price-small" v-if="item.priceDecimal">.{{item.priceDecimal}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import banner from '@/components/banner/banner.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			banner
		},
		data() {
			return {
				bannerList: [
					{
						imageUrl: 'https://img2.baidu.com/it/u=1124224297,2506157573&fm=253&fmt=auto&app=138&f=PNG?w=800&h=500',
						linkUrl: 'https://uniapp.dcloud.net.cn/'
					},
					{
						imageUrl: 'https://img1.baidu.com/it/u=4207076684,1741302849&fm=253&fmt=auto&app=138&f=JPEG?w=625&h=500',
						linkUrl: 'https://uniapp.dcloud.net.cn/'
					},
					{
						imageUrl: 'https://img0.baidu.com/it/u=1909984295,793140206&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=312',
						linkUrl: 'https://uniapp.dcloud.net.cn/'
					},
					{
						imageUrl: 'https://img1.baidu.com/it/u=2152497483,348697866&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
						linkUrl: 'https://uniapp.dcloud.net.cn/'
					}
				],
				goodsList: [],
				leftList: [],
				rightList: []
			}
		},
		methods: {
			upCallback(page){
				let pageParam = '?page='+page.num+'&rows='+page.size
				this.$api.post('/goods/findByPage' + pageParam).then(res => {
					console.log(res);
					let list = res.data.list;
					// if(page.num == 1) {
					// 	this.goodsList = [];
					// }
					// this.goodsList = this.goodsList.concat(list);
					this.dataHandle(page.num, list);
					this.mescroll.endBySize(list.length, res.data.total); 
				})
			},
			dataHandle(page, list){
				if(page == 1){
					this.leftList = [];
					this.rightList = [];
				}
				list.forEach((item, index)=>{
					const count = index + 1;
					item.priceInteger = this.priceHandle(item.price).priceInteger;
					item.priceDecimal = this.priceHandle(item.price).priceDecimal;
					if(count % 2 === 0) {
						this.rightList.push(item);
					} else {
						this.leftList.push(item);
					}
				})
			},
			toDetail(item){
				uni.navigateTo({
					url: '/pagesIndex/goods/detail/detail?id='+item.id
				})
			},
			priceHandle(price){
				let priceStr = price + '';
				if(priceStr.indexOf('.') != -1){
					let prices = priceStr.split('.');
					return {
						priceInteger: prices[0],
						priceDecimal: prices[1]
					}
				} else {
					return {
						priceInteger: priceStr,
						priceDecimal: ''
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-hot {
		margin: 5px 0;
		padding: 5px 0 10px 0;
	}

	.index-list {
		align-items: flex-start;
		image{
			width: 344rpx;
			height: 400rpx;
			border-radius: 20rpx;
		}
		.box-card{
			padding: 0;
			margin-top: 0;
		}
		.goods-card-left{
			margin-right: 10rpx;
		}
		.goods-card-right{
			margin-left: 10rpx;
		}
		.goods-title{
			max-height: 60px;
			line-height: 20px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.goods-price{
			color: $uni-error;
			.goods-price-small {
				font-size: 10px;
			}
		}
	}
</style>
